<template lang="pug">
  #mobile
    header
    section
      a(href="http://e.hengdianworld.com/yd_mp_activity.aspx?id=568"): img(class="center p1" src="../images/mobile/p1.png")
      div.ll
        a(href="http://e.hengdianworld.com/yd_mp_activity.aspx?id=516"): img(class="p2" src="../images/mobile/p2.png")
        a(href="http://e.hengdianworld.com/yd_mp_activity.aspx?id=487"): img(class="p3" src="../images/mobile/p3.png")
      a(href="http://e.hengdianworld.com/yd_tc_activity.aspx?id=155"): img(class="p4 center" src="../images/mobile/p4.png")
      a(href="http://e.hengdianworld.com/yd_tc_activity.aspx?id=139"): img(class="p5 center" src="../images/mobile/p5.png")
      a(href="http://e.hengdianworld.com/yd_mp_activity.aspx?id=543"): img(class="p6 center" src="../images/mobile/p6.png")
      img(class="w1 center" src="../images/mobile/w1.png")
      img(class="w2 center" src="../images/mobile/w2.png")

</template>

<script>
  export default {

    name: 'Mobile',

    data() {
      return {

      }
    }
  }
</script>

<style lang="scss" scoped>
  $baseFontSize:7.9;

  @function px2vw($px) {
    @return $px / $baseFontSize * 1vw;
  }

  header {
    background: url(../images/mobile/header.jpg) center no-repeat;
    background-size: cover;
    height: px2vw(538);
    width: 100vw;
  }

  section {
    margin-top: px2vw(-2);
    position: relative;
    background: #de404f;
    height: px2vw(2129);

    .center {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }

    .p1 {
      top: px2vw(20);
      width: px2vw(725);
    }

    .w1 {
      top: 46.9vw;
      width: px2vw(445)
    }

    .ll {
      position: absolute;
      top: 60.65vw;
      width: px2vw(733);
      left: 50%;
      transform: translate(-51%, 0);

      .p2,
      .p3 {
        float: left;
        width: px2vw(372);
      }

      .p3 {
        margin-top: 5px;
        width: px2vw(361);
      }
    }

    .w2 {
      top: 115.11vw;
      width: px2vw(420);
    }

    .p4 {
      top: px2vw(1027);
      width: px2vw(725);
    }

    .p5 {
      top: px2vw(1276);
      width: px2vw(726);
    }

    .p6 {
      top: px2vw(1566);
      width: px2vw(729);
    }

  }
</style>